/**
* @file  Dev
* @author xiao_xie
* @date 2025-03-19
*/


import { CommonComponentProps } from '../../../../types/interface';
import { MarginPaddingSize } from '../Container/Dev';
import classNames from 'classnames';

const Dev = ({ id, text, size, margin, padding, color, bold, italic, underline, strikethrough, ...props }: CommonComponentProps) => {



    const cls = classNames({
        'box-border': true,
        'text-2xl': size === MarginPaddingSize.large,
        'text-xl': size === MarginPaddingSize.medium,
        'text-base': size === MarginPaddingSize.small,
        'm-2': margin === MarginPaddingSize.small,
        'm-4': margin === MarginPaddingSize.medium,
        'm-6': margin === MarginPaddingSize.large,
        'p-2': padding === MarginPaddingSize.small,
        'p-4': padding === MarginPaddingSize.medium,
        'p-6': padding === MarginPaddingSize.large,
        'font-bold': bold,
        'italic': italic,
        'underline': underline,
        'line-through': strikethrough
    })

    return <p data-component-id={id} className={cls} style={{ color: color || 'inherit' }} {...props}>{text}</p>

};
export default Dev;
